import { defineComponent, PropType, ref, toRefs } from "vue";
import '@src/modules/trigger/components/ProcessNodeChart/style/add-operator-node.scss'
/*componets */
import ConditionPopover from '@src/modules/trigger/components/ProcessNodeChart/components/ConditionPopover'
import { ProcessNodeListItem } from '@src/modules/trigger/model/interface/index.ts'
/* hooks */
import { useCurrentInstance } from '@src/modules/trigger/hooks/useVC'
/* type */
import { addNodeType } from '@src/modules/trigger/model/type/main.ts'
/* utils */
import { uuid } from '@src/util/lang/string';

export default defineComponent({
    name: 'AddOperatorNode',
    props: {
        nodeData: {
            type: Object as PropType<ProcessNodeListItem>,
            default: () => ({})
        }
    }, 
    setup(props) {
        const {nodeData} = toRefs(props)
        const normalNodeRef = ref(null)
        const [currentCtx, setData] = useCurrentInstance()

        const popoverAddNodeHandler = (addNodeType: addNodeType) => {
            let defaultNodeData = {
                type: addNodeType,
            }
            currentCtx?.$eventBus.$emit('trigger-design-addNodeChange', nodeData.value, defaultNodeData)
            // @ts-ignore
            normalNodeRef.value.doClose()
        }


        return ()=> (
            <div class="process-add-node__operator">
                <el-popover
                    trigger="click"    
                    placement="right"
                    popper-class="process-node-popover"
                    ref={normalNodeRef}
                    append-to-body={false}
                    popper-options={{
                    	boundariesElement: 'body',
                    	gpuAcceleration: true,
                    	positionFixed: true,
                    	preventOverflow: true
                    }}
                >
                    <div class="process-add-node__operator-btn" slot="reference">
                        <i class="icon el-icon-plus"></i>  
                    </div>
                    <ConditionPopover nodeData={nodeData} onAddNode={(addNodeType) => popoverAddNodeHandler(addNodeType)}/>
                </el-popover>
            </div>
        )
    }
})

